<div class="image-tab-container-{{ section.id }} overflow-hidden my-section">
  <input class="as-image-tab-script" type="hidden" value="{{ 'teasing-image-tab.min.js' | asset_url }}" {% if request.design_mode %}data-design-mode="yes"{% endif %}>

  <div class="container mb-6 mb-lg-9">
    <div class="row justify-content-sm-center">
      <div class="col-12 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10">
        <div class="mw-text-5 text-md-center text-center mx-md-auto mx-auto">
          {%- if section.settings.overline != empty -%}
            <p class="mt-2 mb-0 h5 text-primary">{{ section.settings.overline }}</p>
          {%- endif -%}
          {%- if section.settings.heading != empty -%}
            <h2 class="h1 mt-3 mt-md-4 mb-0">{{ section.settings.heading }}</h2>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>

  {%- assign slide_blocks = section.blocks | where: 'type', 'slide' -%}
  {%- if slide_blocks.size > 0 -%}
    <div class="mw-100 position-relative d-flex flex-column not-initialized overflow-hidden as-teasing-image-tab-container">
      <div class="swiper position-relative w-100 as-swiper as-lazy-video">
        <div class="swiper-wrapper main-swiper-wrapper">
          {%- for block in slide_blocks -%}
            {% liquid
              assign autoplay = false
              if forloop.first
                assign autoplay = true
              endif
            %}
            {%- assign sizes = '(min-width: 1440px) 1142px, (min-width: 1280px) 842px, (min-width: 1152px) 742px, (min-width: 768px) 598px, (min-width: 576px) 450px, 312px' -%}
            <div class="as-swiper-slide main-swiper-slide swiper-slide {% if forloop.first %}swiper-slide-active{% endif %}" {{ block.shopify_attributes }}>
              {%- if block.settings.desktop_image != nil -%}
                <div class="d-md-block d-none ratio rounded-2 overflow-hidden"
                  style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.desktop_image.aspect_ratio | times: 100 }}%;">
                  <div class="as-slide-pc-video rounded-2 overflow-hidden">
                    {{ block.settings.desktop_video | video_tag: image_size: "1024x", autoplay: autoplay, loop: true, controls: false, muted: true, preload: "none", class: "w-100 h-100 object-fit-cover" }}
                  </div>
                  <div class="as-slide-pc-image rounded-2 overflow-hidden{% if forloop.first %} opacity-0{% endif %}">
                    {{ block.settings.desktop_image | image_url: width: block.settings.desktop_image.width | image_tag: loading: 'lazy', class: 'object-fit-cover w-100 h-100', sizes: sizes }}
                  </div>
                </div>
              {%- else -%}
                <div class="d-md-block d-none ratio ratio-2x1 rounded-2 bg-gray-400 overflow-hidden">
                  {% assign num = forloop.index | modulo: 5 | plus: 1 %}
                  {% assign placeholder = 'collection-' | append: num %}
                  {{ placeholder | placeholder_svg_tag: 'absolute-center placeholder-svg w-100 h-100' }}
                </div>
              {%- endif -%}

              {%- if block.settings.mobile_image != nil -%}
                <div class="d-md-none d-block ratio rounded-2 overflow-hidden"
                  style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.mobile_image.aspect_ratio | times: 100 }}%;">
                  <div class="as-slide-mob-video rounded-2 overflow-hidden">
                    {{ block.settings.mobile_video | video_tag: image_size: "1024x", autoplay: autoplay, loop: true, controls: false, muted: true, preload: "none", class: "w-100 h-100 object-fit-cover" }}
                  </div>
                  <div class="as-slide-mob-image slide-mask-image rounded-2 overflow-hidden{% if forloop.first %} opacity-0{% endif %}">
                    {{ block.settings.mobile_image | image_url: width: block.settings.mobile_image.width | image_tag: loading: 'lazy', class: 'object-fit-cover w-100 h-100', sizes: sizes }}
                  </div>
                </div>
              {%- else -%}
                <div class="d-md-none d-block ratio ratio-3x2 rounded-2 bg-gray-400 overflow-hidden">
                  {% assign num = forloop.index | modulo: 5 | plus: 1 %}
                  {% assign placeholder = 'collection-' | append: num %}
                  {{ placeholder | placeholder_svg_tag: 'absolute-center placeholder-svg w-100 h-100' }}
                </div>
              {%- endif -%}
              <div class="bottom-0 position-absolute h-100 main-swiper-slide-mask rounded-2"></div>
              <div class="bottom-0 main-swiper-slide-account pb-3 pb-md-4 position-absolute ps-4 ps-md-5 text-white">
                <div class="flex-center flex-nowrap">
                  {%- if block.settings.avatar_image != nil -%}
                    <div class="overflow-hidden rounded-pill">
                      <img src="{{ block.settings.avatar_image | image_url: width: 34 }}" loading="lazy" width="34" height="34">
                    </div>
                  {%- endif -%}
                  <div class="ms-2 text-nowrap fw-bold">{{ block.settings.title }}</div>
                </div>
              </div>
            </div>
          {%- endfor -%}
        </div>
      </div>
                {%- comment -%}指示器{%- endcomment -%}
      <div class="swiper-indicators-container container " style="height: 0">
        <div class="row justify-content-center">
          <div class="{{ content_column_class }}">
            <div class="as-swiper-indicators swiper swiper-indicators d-flex flex-nowrap flex-md-wrap {{ controls_alignment }} {% if section.settings.tab_position == 'top' %}mt-0{% endif %}">
              <div class="swiper-wrapper d-flex flex-nowrap flex-md-wrap {{ controls_alignment }}">
                {%- for block in slide_blocks -%}
                  {%- if block.settings.heading != empty -%}
                    <div class="as-swiper-indicator swiper-slide swiper-indicator {% if forloop.first %}swiper-indicator-active{% endif %}" data-index="{{ forloop.index0 }}">
                      <h3 class="mb-0 lead fw-bold {% if section.settings.text_color == 'white' %}light{% else %}dark{% endif %}">{{ block.settings.heading }}</h3>
                    </div>
                  {%- endif -%}
                {%- endfor -%}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {%- endif -%}
</div>

{% javascript %}
  (function() {
    var $url = document.querySelector('.as-image-tab-script')
    if (!window.imageTab && $url && $url.dataset.designMode !== 'yes') {
      window.imageTab = $url.value

      var $script = document.createElement('script')
      $script.src = window.imageTab
      $script.defer = "defer"
      document.body.appendChild($script)
    }
  })()
{% endjavascript %}

{% schema %}
  {
    "name": "Teasing image tab",
    "class": "teasing-image-tab as-image-tab",
    "tag": "section",
    "max_blocks": 7,
    "settings": [
      {
        "type": "text",
        "id": "overline",
        "default": "Overline",
        "label": "Overline"
      },
      {
        "type": "text",
        "id": "heading",
        "default": "Image with text",
        "label": "Heading"
      }
    ],
    "blocks":[
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "type": "header",
            "content": "Image"
          },
          {
            "label": "Desktop image",
            "type": "image_picker",
            "id": "desktop_image"
          },
          {
            "label": "Mobile image",
            "type": "image_picker",
            "id": "mobile_image"
          },
          {
            "type": "header",
            "content": "Video"
          },
          {
            "type": "video",
            "id": "desktop_video",
            "label": "Desktop video",
            "info": "A Shopify-hosted video"
          },
          {
            "type": "video",
            "id": "mobile_video",
            "label": "Mobile video",
            "info": "A Shopify-hosted video"
          },
          {
            "label": "Avatar image",
            "type": "image_picker",
            "id": "avatar_image"
          },
          {
            "type": "text",
            "id": "title",
            "default": "account",
            "label": "Account"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Teasing image tab",
        "blocks": [
          {
            "type": "slide"
          },
          {
            "type": "slide"
          },
          {
            "type": "slide"
          }
        ]
      }
    ]
  }
{% endschema %}
